<template>
  <el-dialog title="详情" :visible.sync="upJuanOpen" width="50%" append-to-body :before-close="closeDelDialog">
    <div class="app-container">
      <el-button type="primary"  @click="closeDelDialog">返 回</el-button>
      <ul class="upJuan" ref="upJuanForm" :model="upJuanForm">
        <li class="list-item"><label>案卷号：</label>{{ upJuanForm.ajh }}</li><li class="list-item"><label>案卷题名：</label>{{ upJuanForm.title }}</li>
        <li class="list-item"><label>档号：</label>{{ upJuanForm.dh }}</li><li class="list-item"><label>保管期限：</label>{{ upJuanForm.bgqx }}</li>
        <li class="list-item"><label>归档司局：</label>{{ upJuanForm.gdsj }}</li><li class="list-item"><label>归档处室：</label>{{ upJuanForm.gdcs }}</li>
        <li class="list-item"><label>上架时间：</label>{{ upJuanForm.sjTime }}</li><li class="list-item"><label>位置：</label>
        <span :title="upJuanForm.wz">
            {{ upJuanForm.wz }}
          </span></li>
        <li class="list-item"><label>创建时间：</label>{{ upJuanForm.createTime }}</li>
      </ul>
    </div>
    <div class="table">
      <h2 style="margin-left: 10px">档案列表</h2>
      <el-table v-loading="loading" :data="dataList" height="120">
        <el-table-column label="序号" type="index" :index="table_index" prop="id" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button  type="text" icon="el-icon-document" @click="celldblclick(scope.row)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="档案门类" prop="daml" :show-overflow-tooltip="true" />
<!--        <el-table-column label="整理方式" prop="zlfs" :show-overflow-tooltip="true" />-->
        <el-table-column label="文件标题" prop="title" :show-overflow-tooltip="true" />
        <el-table-column label="保管期限" prop="bgqx" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <!-- 使用 formatter 设置样式 -->
            <span :style="getStyle(scope.row.bgqx)">{{ scope.row.bgqx }}</span>
          </template>
        </el-table-column>
        <el-table-column label="年度" prop="nd" :show-overflow-tooltip="true" />
        <el-table-column label="密级" prop="mj" :show-overflow-tooltip="true" />
        <el-table-column label="归档司局" prop="gdsj" :show-overflow-tooltip="true" />
        <el-table-column label="归档处室" prop="gdcs" :show-overflow-tooltip="true" />
        <el-table-column label="上架位置" prop="position" :show-overflow-tooltip="true" />
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>

    <!--start  组件详情 -->
    <jianDetailsOpen v-if="jianDetailsOpen" :open="jianDetailsOpen" :celldbData="celldbData"
                     @detailsHandleClose="detailsHandleClose">
    </jianDetailsOpen>
    <!--end 组件详情 -->
    <!-- start 组卷\项目详情 -->
    <juanDetailsOpen v-if="juanDetailsOpen" :open="juanDetailsOpen" :celldbData="celldbData"
                     @detailsHandleClose="detailsHandleClose"></juanDetailsOpen>
    <!-- end 组卷\项目详情 -->
  </el-dialog>
</template>

<script>

import {dalist, detail, getcateidbyid, getthbytreenodeHeaderList} from "@/api/archive/warehouseManagement/upDownShelves";
import jianDetailsOpen from '@/components/componentsJianDetails/index.vue' //件详情
import juanDetailsOpen from '@/components/componentsJuanDetails/index.vue' // 卷详情
import {getLastIndexOf} from "@/utils";

export default {
  name: "upJuanDetail",
  props: ["upJuanOpen"],
  archive_Dicts: ['BGQX', 'MJ'],
  components: { jianDetailsOpen, juanDetailsOpen },
  data() {
    return {
      upJuanForm: {},
      loading: true,
      dataList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dataId: "",

      jianDetailsOpen: false,//件详情弹窗
      juanDetailsOpen: false,//卷详情弹窗
    }
  },
  methods: {
    init(val) {
      console.log(val)
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }
      this.dataId = val
      this.getList()
      const id = val
      detail(id).then(response => {
        console.log(response.data)
        this.upJuanForm = response.data
        for (let j = 0; j < this.dict.type.BGQX.length; j++) {
          if(response.data.bgqx == this.dict.type.BGQX[j].value){
            this.upJuanForm.bgqx = this.dict.type.BGQX[j].label
          }
        }
      })
    },
    //关闭页面
    closeDelDialog() {
      this.$emit("upJuanCancel")
    },
    table_index(index){
      return (this.queryParams.pageNum-1) * this.queryParams.pageSize + index + 1;
    },
    getList() {
      this.loading = true
      this.queryParams.id = this.dataId
      this.queryParams.type = '1'
      dalist(this.queryParams).then(response=>{
        this.dataList = response.rows
        for (let i = 0; i < response.rows.length; i++) {
          for (let j = 0; j < this.dict.type.BGQX.length; j++) {
            if(response.rows[i].bgqx == this.dict.type.BGQX[j].value){
              this.dataList[i].bgqx = this.dict.type.BGQX[j].label
            }
          }

          for (let j = 0; j < this.dict.type.MJ.length; j++) {
            if(response.rows[i].mj == this.dict.type.MJ[j].value){
              this.dataList[i].mj = this.dict.type.MJ[j].label
            }
          }
        }
        this.total = response.total
        this.loading = false
      })
    },
    getStyle(bgqxValue) {
      // 根据条件动态生成样式
      return bgqxValue == this.upJuanForm.bgqx ? {} : { color: 'red' };
    },
    //双击列表进入详情页面
    celldblclick(row) {
      var level="";
      var type = "";
      if (getLastIndexOf(row.subtableName) == "F") {  //F 件
        level = 0
        type = "f"
      } else if (getLastIndexOf(row.subtableName) == "V") { //卷
        level = 1
        type = "v"
      } else { //项目
        level = 3
        type = "x"
      }
      this.form = {
        id: row.daId,
        type: type
      }
      getcateidbyid(this.form).then(response => {
        var categoryId = response.data
        var menuId = this.$route.meta.menuId
        getthbytreenodeHeaderList(
          {
            categoryId: categoryId, menuId: menuId, subTableName: row.subtableName
          }
        ).then(response => {
          var tableHeaderList = response.rows
          this.celldbData = {
            id: row.daId,
            categoryId: categoryId,
            menuId: menuId,
            sub_table_name: row.subtableName,
            label: row.title,
            level: level,
            ifSub_table_name: row.subtableName,
            isDel:"0",  //判断是回收站数据还是接收收据 isDel:1  回收站    isDel:0 //离线接收、档案接收、在线接收
            tableHeaderList: tableHeaderList
          }
          this.$nextTick(() => {
            if (getLastIndexOf(row.subtableName) == "F") {  //F 进入件详情
              this.jianDetailsOpen = true;
            } else { //进入卷详情 和项目详情
              this.juanDetailsOpen = true
            }
          })
        })
      })
    },
    //关闭详情页面
    detailsHandleClose() {
      this.jianDetailsOpen = false;
      this.juanDetailsOpen = false;
    },
  }
}
</script>

<style lang="scss" scoped>
.list-item {
  font-size: 18px;
  line-height: 50px;
  height: 50px;
  width: 45%;
  display: inline-block;
  margin-right: 20px; /* 可根据需要调整元素之间的间距 */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.list-item label {
  width: 100px;
  text-align: right;
  margin-right: 10px;
}

.table {
  height: 200px
}
</style>
